<template>
  <div id="main">
    <el-header>
      <el-row :gutter="20">
        <el-col :span="21">
          <div>
            <el-image :src="require('@/assets/img/bkdlogo.png')" alt="sorry" @error="imageError"></el-image>
            <div class="mainTitle">球团配料操作系统</div>
          </div>
        </el-col>
        <el-col id="welcomeText"  :span="3">
          <div class="welcomeText">
            欢迎您
          </div>
        </el-col>
      </el-row>


    </el-header>


    <el-container>
      <el-aside>
        <div v-for="(item0, index0) in $router.options.routes" :index="index0+''"
             v-if="item0.name=='MainPage'">

          <el-menu router :default-openeds="['0']">
            <el-submenu v-for="(item, index) in item0.children" :index="index+''"
                        v-if="item.show==true">

              <template slot="title"><i class="el-icon-s-custom"></i>{{ item.name }}</template>

              <el-menu-item v-for="(item2, index2) in item.children" :index="item2.path"
                            :class="$route.path==item2.path?'is-active':''" v-if="item2.show==true">{{ item2.name }}
              </el-menu-item>
            </el-submenu>
          </el-menu>

        </div>

      </el-aside>
      <el-main>
        <router-view>

        </router-view>
      </el-main>
    </el-container>

  </div>
</template>

<script>
export default {
  name: "main.vue"
}
</script>

<style>


#welcomeText{
  height:60px;
}

.welcomeText{
  font-family: 思源宋体;
  font-size: 15px;
  font-weight: bold;
  display: inline-block;
  vertical-align: top;
  margin-left: 20px;
  margin-right: 20px;
  margin-top: 40px;

}

.mainTitle {
  font-family: 思源宋体;
  font-size: 30px;
  font-weight: bold;
  display: inline-block;
  vertical-align: top;
  margin-left: 20px;
  margin-right: 20px;
  margin-top: 10px;
}

.el-header {
  background-color: #3a4974;
  color: #ffffff;
  height: max-content;
  vertical-align: top;
  text-align: left;
  padding-top: 25px;
  padding-bottom: 80px;

}

.el-aside {
  /*background-color: #3a4974;*/
  /*color: #fdfdfd;*/
  text-align: center;
  line-height: 180px;
  font-family: 思源宋体;
  font-weight: bold;

}

.el-submenu__title {
  margin-top: 5px;
  /*background-color: #3a4974;*/
  /*color: #fdfdfd;*/
  font-size: large;

}

.el-menu-item {
  /*background-color: #3a4974;*/
  /*color: #fdfdfd;*/
  font-size: medium;
}

.el-menu {

}

.el-main {
  background-color: #E9EEF3;
  color: #333;
  text-align: left;
}

body > .el-container {
  margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}
</style>